<template>
<view class="uni-padding-wrap">
	<!-- <form >
		<textarea class="contentTextArea" name="commentContent" v-model="commentContent" placeholder="请输入您的发表......"></textarea>
		<button class="commitButton" formType="submit" @submit="commitComments">发表</button>
	</form>		 -->
	
	<view class="uni-comment">
		<view class="uni-comment-list" v-for="(commentsList,index) in commentsList" :key="index">
			<view class="uni-comment-face">
				<image :src="commentsList.src" mode="widthFix"></image>
			</view> 
			<view class="uni-comment-body">
				<view class="uni-comment-top">
					<text>{{commentsList.name==''||commentsList.name==null?'匿名':commentsList.name}}
					</text>
				</view>
				<view class="testText"><!-- 标题 -->
					<text style="position: absolute; font-size: 32rpx; font-weight: 200;">{{commentsList.title}}</text>
				</view>
				<!-- <view class="uni-comment-date">
					{{commentsList.created_at}}
				</view> -->
				<view>
					<image :src="commentsList.src1" style="width: 90%;" mode="aspectFit"></image>
				</view>
				<view class="uni-comment-content">{{commentsList.content}}</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
	export default {
		data() {
			return {
				commentsList:[],
						index:'',
						nickname:'',
						created_user_id:'',
						commentContent:'',

			}
		},
		onLoad() {
			this.loadCommentsList();
		},
		methods: {
			async loadCommentsList(){//加载评论信息
				this.commentsList=await this.$CAPI.noSignGet(this.$CAPI.getforum);
				/* console.log('commentslist'+this.commentsList); */
				},
			commitComments() {
			                //这里定义你自己要请求添加留言接口带的值，我是从接口获取到了
					var created_user_id = this.created_user_id;
					var content = this.commentContent;
					var nickname = this.nickname;
					var commentsList=this.commentsList;
					uni.request({	
							url: '',
							method: 'POST',
							header: {
								'content-type': "application/x-www-form-urlencoded"
							},
			                //因为我要传递数组格式的comment:{content:'',userid:''}给后台所以这样写，你直接传字段的话就去掉前面的comment和中括号就好了。
							data: {
								'comment[content]': content,					
								'comment[created_user_id]': created_user_id,
							},
							success: function(res) {
								if (res.data.success == 1) {
									uni.showToast({
										icon: 'success',
										title: '留言成功'
									});	
			                              //这是重点，意思是动态添加，使用unshift就插在前面，也可以用push							
									commentsList.total += 1;
									commentsList.unshift({
										"nickname": nickname,
										"content":content,
										"id":res.data.id,									
									});									
								} else {
									uni.showToast({
										title: res.data.data,
										icon: "none"
									});
								}
							}
						})
				},
		}
	}
</script>

<style>
  .uni-padding-wrap {
		padding: 30upx;
	}
 
	view {
		font-size: 28upx;
	}
 
	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #e9e7ef;
	}
 
	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #e9e7ef;
	}
 
	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}
 
	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}
 
	.uni-comment-body {
		width: 100%;
	}
 
	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}
 
	.uni-comment-top text {
		color: #0A98D5;
		font-size: 24upx;
	}
 
	.uni-comment-date {
		line-height: 38upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
		color: gray;
	}
 
	.uni-comment-date view {
		color: #666666;
		font-size: 24upx;
		line-height: 38upx;
	}
 
	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 0;
	}
 
	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
	.commitButton{
		
		color: white;
		width: 90%;
		margin: 0rpx auto;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 37rpx;
		background: linear-gradient(left top,#86B6FD, #8fc9fc,#86B6FD);
	}
	.contentTextArea{
		font-size: 30rpx;
		height: 170rpx;
		border:1rpx solid #e9e7ef;
		width: 86%;
		margin: 0rpx auto;
		margin-bottom: 15rpx;
		padding: 20rpx 0 0 20rpx;
		border-radius: 6rpx;
	}
	.image {
		width: 100%;
	/* 	height: 100%; */
		border-radius: 10upx;
		margin: 0 auto;
	}
	.testText{/* title样式 */
	width: 75%;
	height:60upx;
	text-align: center;
	color:#4399FC;
	
	}
</style>
